<template>
    <ul class="el-upload-list el-upload-list--text">
            <li tabindex="0" :class="isDelete?'el-upload-list__item is-success':'el-upload-list__item'" :key="file.id"  v-for="(file) in fileList">
                <a class="el-upload-list__item-name" @click="handlePreview(file)">
                    <i class="el-icon-document icon_file_box" v-if="isDelete"></i>{{file.fileName || file.name}}
                </a>
                <label class="el-upload-list__item-status-label">
                    <i class="el-icon-upload-success el-icon-circle-check"></i>
                </label>
                <i class="el-icon-close"  @click="handleDelete(file)" v-if="isDelete" ></i>
            </li>
    </ul>
</template>

<script>
export default {
    name: 'FileList',
    components: {
    },
    props: {
        fileList: {
            type: Array,
            default: []
        },
        isDelete: {
            type: Boolean,
            default: true
        },
    },
    data() {
        return {
        }
    },
    methods: {
        handleDelete(file) {
            this.$emit('on-delete', file)
        },
        handlePreview(file) {
            this.$emit('on-preview', file)
        }
    }
}

</script>

<style>
.el-upload-list__item{
    text-align: left;
}
.icon_file_box{
    vertical-align: bottom;
}
.file_name_box{
    vertical-align: top;
}


</style>